<template>
  <div :style="{width: curWidth + 'px' }" class="tabs">
    <el-tabs v-model="active" :type="tabType" :tab-position="tabPosition" :stretch="tabStretch" editable @edit="tabEdit">
      <el-tab-pane v-for="tab in tabs" :id="tab.id" :key="tab.id" :name="tab.id">
        <div slot="label" class="tabLabel">
          <icon v-if="tab.icon" class="icon" :icon="tab.icon" />
          <span style="margin-right: 5px;">{{ tab.label }}</span>
          <el-link icon="el-icon-edit" @click="editTab(tab)" />
        </div>
        <component
          :is="tab.key"
          :key="tab.Id"
          :page-id="pageId"
          :content-width="tabWidth"
          v-bind="tab"
        />
      </el-tab-pane>
    </el-tabs>
    <editControl :id="curId" :visible.sync="visible" :content-width="curWidth" :page-id="pageId" @close="close" />
  </div>
</template>

<script>
import Vue from 'vue'
import * as layoutApi from '@/customForm/api/pageLayout'
import { layoutControl } from '@/customForm/config/formConfig'
import editControl from '../pageEdit/editControl.vue'
export default {
  components: {
    editControl
  },
  props: {
    id: {
      type: String,
      default: null
    },
    pageId: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    children: {
      type: Array,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    extend: {
      type: Object,
      default: null
    },
    search: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      tabs: null,
      curWidth: null,
      tabWidth: null,
      active: null,
      tabType: 'border-card',
      tabPosition: 'top',
      tabStretch: false,
      curId: null,
      visible: false
    }
  },
  computed: {},
  watch: {
    item: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    width: {
      handler(val) {
        if (val && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.width) {
          this.init()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    init() {
      if (this.width === 23) {
        this.curWidth = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        this.curWidth = Math.round(this.contentWidth / this.width) - 12
      }
      this.tabWidth = this.curWidth - 32
    },
    editTab(tab) {
      this.curId = tab.id
      this.visible = true
    },
    close(isRefresh, id, control, type) {
      if (isRefresh) {
        const tab = this.tabs.find(c => c.id === id)
        tab.label = control.Name
        if (control.Layout) {
          tab.icon = control.Layout.Icon
        } else {
          tab.icon = null
        }
      }
    },
    tabEdit(name, action) {
      if (action === 'add') {
        this.add()
      } else {
        const item = this.tabs.find(c => c.id === name)
        if (item != null) {
          this.drop(item)
        }
      }
    },
    drop(item) {
      const title = '确认删除选项卡 ' + item.label + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(item)
      })
    },
    async submitDrop(item) {
      await layoutApi.Delete(item.id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      const index = this.tabs.findIndex(c => c.id === item.id)
      this.tabs.splice(index, 1)
      if (this.active === item.id) {
        this.active = this.tabs.length > 0 ? this.tabs[0].id : null
      }
    },
    async add() {
      const add = {
        PageId: this.pageId,
        ControlId: layoutControl.tab,
        ParentId: this.id,
        Sort: this.tabs.length + 1
      }
      const res = await layoutApi.Add(add)
      const item = this.format(res)
      this.tabs.push(item)
      if (this.tabs.length === 1) {
        this.active = res.id
      }
    },
    format(control) {
      const t = {
        key: 'tab_' + control.Id,
        id: control.Id,
        label: control.Name,
        children: control.Children,
        icon: null
      }
      if (control.Layout) {
        t.icon = control.Layout.Icon
      }
      Vue.component(t.key, function(resolve, reject) {
        require(['@/' + control.ControlPath + '.vue'], resolve)
      })
      return t
    },
    reset() {
      if (this.item) {
        this.tabType = this.item.Type
        this.tabPosition = this.item.Position ?? 'top'
        this.tabStretch = this.item.Stretch ?? false
      } else {
        this.tabType = 'border-card'
        this.tabPosition = 'top'
        this.tabStretch = false
      }
      if (this.children != null && this.children.length > 0) {
        this.tabs = this.children.map(e => {
          return this.format(e)
        })
        if (this.tabs.length > 0) {
          this.active = this.tabs[0].id
        }
      } else {
        this.tabs = []
        this.active = null
      }
    }
  }
}
</script>
<style lang="css" scoped>
.tabs{
  min-height: 100px;
  padding: 5px;
}
.tabs .tabLabel {
  display: contents;
  padding-right: 3px;
}
.tabs .tabLabel .icon {
  font-size: 1.1em;
}
.tabs .draggable-group {
    width: 100%;
    min-height: 100px;
    display:block;
}
</style>
